<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
    <script src="/js/vue/vue.js"></script>
    <script src="/js/axios/axios.min.js"></script>
    <script src="/js/qs/qs.min.js"></script>
    <script src="/js/elementui/index.js"></script>
    <style>
        .el-table .ss{
            background: #3a8ee6;
        }
        .el-table .uns{
            background: #fcfaff;
        }
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }

    </style>
</head>
<body>
<div id="app">
    <h1>商品信息管理</h1>
    <el-button type="primary" icon="el-icon-plus" @click="dialogFormVisible = true" >添加商品</el-button>
    <el-input v-model="productName" placeholder="请输入需要搜索的商品名"></el-input>
    <template>
        <el-select v-model="productEnterprise" placeholder="请选择">
            <el-option
                    v-for="item in productEnterprises"
                    :label="item.name"
                    :value="item.id">
            </el-option>
        </el-select>
    </template>
    <el-button icon="el-icon-search" circle @click="linkProduct()">搜索</el-button>
    <!--<el-button type="primary" icon="el-icon-check" @click="showTreeDialogUser" >修改角色</el-button>-->
    <el-table
            :data="tableData"
            style="width: 100%;margin: 10px auto">

        <!--<el-table-column>
            <template slot-scope="scope">
                <el-checkbox v-model="scope.row.id == currentRow"></el-checkbox>
            </template>
        </el-table-column>-->

        <el-table-column prop="productNumber" label="编号">
            <template slot-scope="scope" @click="">
                <span>{{ scope.row.productNumber }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="productName" label="商品名称">
            <template slot-scope="scope">
                <span>{{ scope.row.productName }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="productImg" label="商品图片">
            <template slot-scope="scope">
                <el-image :src="scope.row.productImg"></el-image>
                <!--<span style="margin-left: 10px">{{ scope.row.img }}</span>-->
            </template>
        </el-table-column>
        <!--<el-table-column
                label="密码"
        >
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.password }}</span>
            </template>
        </el-table-column>-->
        <el-table-column prop="productKind" label="商品种类">
            <template slot-scope="scope">
                <span>{{ scope.row.productKind }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="productCostPrice" label="成本价(￥)">
            <template slot-scope="scope">
                <span>{{ scope.row.productCostPrice }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="productPrice" label="零售价(￥)">
            <template slot-scope="scope">
                <span>{{ scope.row.productPrice }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="productIntegral" label="积分">
            <template slot-scope="scope">
                <span>{{ scope.row.productIntegral }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="productEnterprise" label="商品分类">
            <template slot-scope="scope">
                <span>{{ scope.row.categories.name }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="productAddtime" label="添加时间">
            <template slot-scope="scope">
                <span>{{ scope.row.productAddtime }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="companyId" label="公司">
            <template slot-scope="scope">
                <span>{{ scope.row.company.companyName }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="productApplyStatus" label="审核状态">
            <template slot-scope="scope">
                <el-tag type="info" v-if="scope.row.productApplyStatus == 0">待审核</el-tag>
                <el-tag v-else-if="scope.row.productApplyStatus == 1">审核通过</el-tag>
                <el-tag type="danger" v-else>审核不通过</el-tag>
                <!--<span>{{ scope.row.productApplyStatus }}</span>-->
            </template>
        </el-table-column>
        <el-table-column prop="productStatus" label="商品状态">
        <template slot-scope="scope">
            <el-tag type="info" v-if="scope.row.productStatus == 0">待上架</el-tag>
            <el-tag v-else-if="scope.row.productStatus == 1">以上架</el-tag>
            <el-tag type="danger" v-else>以下架</el-tag>
            <!--<span>{{ scope.row.productStatus }}</span>-->
        </template>
        </el-table-column>
        <el-table-column prop="productRemarks" label="备注">
            <template slot-scope="scope">
                <span>{{ scope.row.productRemarks }}</span>
            </template>
        </el-table-column>
        <!--<el-table-column label="salt">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.salt }}</span>
            </template>
        </el-table-column>-->
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        type="primary"
                        icon="el-icon-edit"
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)"></el-button>
                <el-button
                        icon="el-icon-delete"
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)"></el-button>
                <el-button
                        type="success"
                        icon="el-icon-check"
                        size="mini"
                        @click="handleAdopt(scope.$index, scope.row)">上架</el-button>
                <el-button
                        type="success"
                        icon="el-icon-close"
                        size="mini"
                        @click="handleRevoke(scope.$index, scope.row)">下架</el-button>
                <el-button
                        type="warning"
                        icon="el-icon-s-unfold"
                        size="mini"
                        @click="selectApply(scope.$index, scope.row)">查看</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页· -->
    <el-pagination
            small
            layout="prev, pager, next"
            @current-change="loadPage"
            :total="total"
            :current-page="current"
            :page-size="pageSize"
    >
    </el-pagination>
    <!-- 对话框 -->
    <!-- Form -->
    <el-dialog title="用户管理添加/修改" :visible.sync="dialogFormVisible" @close="closeMyDialog" @open="openMyType">
        <el-form :model="product">
            <el-form-item label="商品名称" :label-width="formLabelWidth">
                <el-input v-model="product.productName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品图片" :label-width="formLabelWidth">
                <el-input v-model="product.productImg" autocomplete="off"></el-input>
            </el-form-item>
            <!--<el-form-item label="商品种类" :label-width="formLabelWidth">
                <el-input v-model="product.productKind" autocomplete="off"></el-input>
            </el-form-item>-->

            <el-form-item label="商品种类" :label-width="formLabelWidth">
                <el-select v-model="product.productKind" placeholder="请选择商品种类">
                    <el-option label="普通商品" value="普通商品"></el-option>
                    <el-option label="积分商品" value="积分商品"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item v-if="product.id == ''" label="成本价(￥)" :label-width="formLabelWidth">
                <el-input v-model="product.productCostPrice" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item v-if="product.productKind == '普通商品'"  label="零售价(￥)" :label-width="formLabelWidth">
                <el-input v-model="product.productPrice" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item v-if="product.productKind == '积分商品'" label="积分" :label-width="formLabelWidth">
                <el-input v-model="product.productIntegral" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品分类" :label-width="formLabelWidth">
                <el-select v-model="product.productEnterprise" placeholder="请选择分类">
                    <el-option  v-for="type in productEnterprises" :label="type.name"
                                :value="type.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="公司" :label-width="formLabelWidth">
                <el-select v-model="product.companyId" placeholder="请选择公司">
                    <el-option  v-for="type in companyList" :label="type.companyName"
                                :value="type.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品备注" :label-width="formLabelWidth">
                <el-input v-model="product.productRemarks" autocomplete="off"></el-input>
            </el-form-item>

            <!-- 图片上传 -->
            <!--<el-form-item label="图片" prop="iocn" :label-width="formLabelWidth">
                <el-upload
                        class="avatar-uploader"
                        name="imgFile"
                        action="/user/upload"
                        :show-file-list="true"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="user.icon" :src="user.icon" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="状态" :label-width="formLabelWidth">
                <el-input v-model="user.state" autocomplete="off"></el-input>
            </el-form-item>-->

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveUser">确 定</el-button>
        </div>
    </el-dialog>

</div>
</body>

<script>
    new Vue({
        el:"#app",
        data() {
            return {
                tableData: null,            //表示数据
                total:0,                    //总条数
                current:1,                  //当前条数
                pageSize:10,                //每条条数
                dialogFormVisible: false,
                product: {
                    id:'',
                    productNumber:'',
                    productName: '',
                    productImg:'',
                    productKind:'',
                    productCostPrice: '',
                    productPrice: '',
                    productIntegral:'',
                    productEnterprise:'',
                    productApplyStatus:'',          //审核状态
                    productStatus:'',               //商品状态
                    productRemarks:'',               //备注
                    companyId:''
                },
                formLabelWidth: '120px',
                lxList:null,
                productName:null,                     //商品名模糊查询
                productEnterprise:null,               //商品类型
                productEnterprises:null,              //所有商品类型
                companyList:null
            }
        },
        methods: {
            //点击修改
            handleEdit(index, row) {
                console.log(index, row);
                this.product=row;
                if (this.product.productStatus == 1){
                    this.$message("商品以上架不允许修改!");
                }else {
                    this.dialogFormVisible = true;
                }

            },
            //点击删除
            handleDelete(index, row) {
                console.log(index, row);
                axios.delete("/product/"+row.id).then(value => {
                    if (value.data.code == 1){
                        this.loadPage(this.current,this.productName,this.productEnterprise);
                    }
                })
            },
            //点击上架
            handleAdopt(index, row){
                if (row.productApplyStatus==1){
                    this.product=row;
                    this.product.productStatus=1;
                    this.updateProduct();
                }else {
                    this.$message("通过审核的商品才可以上架!!!");
                }
            },
            //点击下架
            handleRevoke(index, row){
                if (row.productStatus==1){
                    this.product=row;
                    this.product.productStatus = -1;
                    this.updateProduct();
                }else {
                    this.$message("商品还没有上架!!!");
                }

            },
            loadPage(current,name,enterprise){
                //
                this.current=current;
                //查询商品
                /*this.product.productName=name;
                this.product.productEnterprise=enterprise;*/
                axios.get("/pageProductsByLike/"+current+"/"+name+"/"+enterprise).then(value => {
                    if (value.data.code == 1){
                        this.tableData=value.data.data.records;
                        this.total=value.data.data.total;
                        this.current=value.data.data.current;
                        this.pageSize=value.data.data.pageSize;
                    }
                });
                this.selectType();
                this.productName=null;
                this.productEnterprise=null
            },
            //多条件分页查询
            linkProduct(){
                this.loadPage(this.current,this.productName,this.productEnterprise);
            },
            //开启对话框时启动
            openMyType(){
                this.selectType();
                this.allCompany();
            },
            //关闭对话框清空数据
            closeMyDialog(){
                this.product={
                    id:'',
                    productNumber:'',
                    productName: '',
                    productImg:'',
                    productKind:'',
                    productCostPrice: '',
                    productPrice: '',
                    productIntegral:'',
                    productEnterprise:'',
                    productApplyStatus:'',          //审核状态
                    productStatus:'',               //商品状态
                    productRemarks:'',               //备注
                    companyId:''
                },
                    this.loadPage(this.current,this.productName,this.productEnterprise);
            },
            //添加、保存用户的方法
            saveUser(){
                if (this.product.id == ""){
                    axios.post("/product",this.product).then(value => {
                        if (value.data.code == 1){
                            this.loadPage(this.current,this.productName,this.productEnterprise);
                        }
                    });
                }else {
                    //修改
                    this.updateProduct();
                };
                this.dialogFormVisible = false;
            },
            //打开对话框时执行,查询类型
            selectType(){
                axios.get("/categories").then(value => {
                    if (value.data.code==1){
                        this.productEnterprises=value.data.data;
                    }
                })
            },
            //上传头像的回调
            handleAvatarSuccess(res, file) {
                this.$message(res.code);
                if(res.code == 1) {
                    this.product.icon = res.data;
                }
            },
            //上传前的检查
            beforeAvatarUpload(file) {
                /*const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;*/
            },
            //查询商品分类
            findAllEnterprise(){

            },
            //修改
            updateProduct(){
                axios.put("/product",this.product).then(value => {
                    if (value.data.code == 1){
                        this.loadPage(this.current,this.productName,this.productEnterprise);
                    }
                });
            },
            //查询所有公司
            allCompany(){
                axios.get("/company").then(value => {
                    if (value.data.code==1){
                        this.companyList=value.data.data;
                    }
                })
            },
            selectApply(index, row){
                axios.get("/productOne/"+row.id).then(value => {
                    if (value.data.code==1){

                    }
                });
                location.href='/products/ProductOne';
            }
        },
        mounted(){
            this.loadPage(this.current,this.productName,this.productEnterprise);
            this.findAllEnterprise();
        }
    });

</script>

</html>